<template>
  <div>
    <!-- Tab菜单项 -->
    <van-tabs @click="handleMenu">
      <van-tab :name="0" title="全部">
        <div v-for="item in listimage" :key="item.id" class="img">
          <van-image
            width="355"
            height="300"
            radius="4px"
            :src="item.img_url"
            @click="imageDetail(item.id)"
          />
          <div class="detail">
            <p class="title">{{item.title}}</p>
            <p class="content">{{item.content}}</p>
          </div>
        </div>
      </van-tab>
      <van-tab v-for="(item,index) in listmenu" :title="item.title" :key="index" :name="item.id">
        <van-image
          width="355"
          height="300"
          radius="4px"
          v-for="item in listimage"
          :key="item.id"
          :src="item.img_url"
          @click="imageDetail(item.id)"
        />
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      listmenu: [],
      listimage: {},
      cateId: ''
    }
  },
  created() {
    this.getMenu()
    this.handleMenu(0)
  },
  methods: {
    async getMenu() {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      // 数组拼接
      this.listmenu = this.listmenu.concat(res.message)
      console.log(this.listmenu)
    },
    async handleMenu(name) {
      // console.log(name, title)
      this.cateId = name
      const { data: res } = await this.$http.get(
        '/api/getimages/' + this.cateId
      )
      console.log(res)
      this.listimage = res.message
    },
    imageDetail(id) {
      console.log(id)
      this.$router.push(`/home/getimages/detail/${id}`)
    }
  }
}
</script>
<style scoped>
.van-image {
  margin: 10px;
}
.img {
  width: 90%;
  position: relative;
}
p {
  color: #fff;
  font-size: 12px;
}
.detail {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 95px;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 20px;
}
.title {
  margin: 5px 0;
}
</style>
